<template>
  <div class="layout-container">
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="layout-header">
        <div class="header-left">
          <el-icon size="24" color="#409eff"><Hospital /></el-icon>
          <span class="system-title">医院管理系统</span>
        </div>
        <div class="header-right">
          <el-badge :value="warningCount" :hidden="warningCount === 0" class="warning-badge">
            <el-button type="text" @click="showWarnings">
              <el-icon size="18"><Warning /></el-icon>
            </el-button>
          </el-badge>
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-icon><User /></el-icon>
              {{ userStore.userName }}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-container>
        <!-- 侧边栏菜单 -->
        <el-aside class="layout-aside">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            router
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/dashboard" v-if="isAdmin">
              <el-icon><House /></el-icon>
              <span>数据概览</span>
            </el-menu-item>
            
            <!-- 用户管理 -->
            <el-sub-menu index="user" v-if="isAdmin">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/users">
                <el-icon><UserFilled /></el-icon>
                <span>用户列表</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 医生管理 -->
            <el-sub-menu index="doctor" v-if="isAdmin">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>医生管理</span>
              </template>
              <el-menu-item index="/doctors">
                <el-icon><UserFilled /></el-icon>
                <span>医生列表</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 科室管理 -->
            <el-sub-menu index="department">
              <template #title>
                <el-icon><OfficeBuilding /></el-icon>
                <span>科室管理</span>
              </template>
              <el-menu-item index="/departments">
                <el-icon><Grid /></el-icon>
                <span>科室列表</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 挂号管理 -->
            <el-sub-menu index="registration">
              <template #title>
                <el-icon><Tickets /></el-icon>
                <span>挂号管理</span>
              </template>
              <el-menu-item index="/registrations">
                <el-icon><List /></el-icon>
                <span>挂号记录</span>
              </el-menu-item>
              <!-- <el-menu-item index="/registration-fees">
                <el-icon><Money /></el-icon>
                <span>费用管理</span>
              </el-menu-item> -->
            </el-sub-menu>
            
            <!-- 排班管理 -->
            <el-sub-menu index="schedule" >
              <template #title>
                <el-icon><Calendar /></el-icon>
                <span>排班管理</span>
              </template>
              <el-menu-item index="/schedules" v-if="isAdmin">
                <el-icon><Clock /></el-icon>
                <span>排班列表</span>
              </el-menu-item>
              <el-menu-item index="/schedules" v-if="!isAdmin">
                <el-icon><Clock /></el-icon>
                <span>我的排班</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 就诊管理 -->
            <el-sub-menu index="medical">
              <template #title>
                <el-icon><Notebook /></el-icon>
                <span>就诊管理</span>
              </template>
              <el-menu-item index="/medical-records">
                <el-icon><Document /></el-icon>
                <span>就诊记录</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 药方管理 -->
            <el-sub-menu index="prescription">
              <template #title>
                <el-icon><DocumentCopy /></el-icon>
                <span>药方管理</span>
              </template>
              <el-menu-item index="/prescriptions">
                <el-icon><List /></el-icon>
                <span>药方列表</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 药品管理 -->
            <el-sub-menu index="medicine">
              <template #title>
                <el-icon><FirstAidKit /></el-icon>
                <span>药品管理</span>
              </template>
              <el-menu-item index="/medicines">
                <el-icon><Box /></el-icon>
                <span>药品库存</span>
              </el-menu-item>
            </el-sub-menu>
            
            <!-- 病房管理 -->
             
            <el-menu-item index="/wards">
              <el-icon><House /></el-icon>
              <span>病房管理</span>
            </el-menu-item>
            
            <!-- 公告管理 -->
            <el-menu-item index="/announcements" v-if="isAdmin">
              <template #title>
                <el-icon><Bell /></el-icon>
                <span>公告管理</span>
              </template>
            </el-menu-item>
            
            <!-- 系统管理 -->
            <el-sub-menu index="system" v-if="isAdmin">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/operation-logs">
                <el-icon><Document /></el-icon>
                <span>操作日志</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        
        <!-- 主内容区 -->
        <el-main class="layout-main">
          <div class="content-wrapper">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { addDialog } from '@/components/gDialog/index'
import UserProfile from '@/views/adminModal/userProfile.vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const isAdmin = computed(() => userStore.isAdmin)
const warningCount = ref(0)
const warningDialogVisible = ref(false)
const warnings = ref([])

// 计算当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 获取用户信息
onMounted(() => {
  // 获取系统预警信息
  fetchWarnings()
})

// 获取系统预警
const fetchWarnings = () => {
  // 模拟预警数据
  const mockWarnings = [
    {
      id: 1,
      title: '药品库存不足',
      description: '阿莫西林胶囊库存仅剩8盒，低于安全库存',
      type: 'warning'
    },
    {
      id: 2,
      title: '药品即将过期',
      description: '维生素C片将于30天后过期，请及时处理',
      type: 'info'
    }
  ]
  
  warnings.value = mockWarnings
  warningCount.value = mockWarnings.length
}

// 显示预警
const showWarnings = () => {
  warningDialogVisible.value = true
}

// 处理预警
const handleWarnings = () => {
  router.push('/medicine-warnings')
  warningDialogVisible.value = false
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      showUserProfile()
      break
    case 'changePassword':
      router.push('/change-password')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 显示个人信息对话框
const showUserProfile = () => {
  addDialog({
    title: '个人信息',
    component: UserProfile,
    width: '600px',
    props: {},
    callBack: (result) => {
      if (result === 'success') {
        ElMessage.success('个人信息更新成功')
      }
    }
  })
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 使用Pinia store的登出方法
      await userStore.logout()
      ElMessage.success('退出成功')
      // 跳转到登录页
      router.push('/login')
    } catch (error) {
      console.error('退出登录失败:', error)
      ElMessage.error('退出登录失败')
    }
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.system-title {
  font-size: 18px;
  font-weight: 500;
  color: #409eff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.warning-badge {
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.layout-aside {
  width: 200px;
  background-color: #545c64;
}

.el-menu-vertical {
  border-right: none;
  height: 100%;
}

.layout-main {
  background-color: #f5f7fa;
  padding: 20px;
}

.content-wrapper {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  min-height: calc(100vh - 140px);
}

.warning-content {
  max-height: 400px;
  overflow-y: auto;
}

.warning-item {
  margin-bottom: 10px;
}

.warning-item:last-child {
  margin-bottom: 0;
}
</style> 